<template>
    <div class="timetable">
        <table>
            <thead>
            <tr>
                <th>时间</th>
                <th :key="index" v-for="(item, index) in tableData.length">
                    {{ "周" + digital2Chinese(item, "week") }}
                </th>
            </tr>
            </thead>
            <tbody>
            <tr :key="index" v-for="(lesson, index) in tableData[0].length">
                <td>
                    <p>{{ "第" + digital2Chinese(lesson) + "节" }}</p>
                </td>
                <td :key="courseIndex" v-for="(course, courseIndex) in tableData">
            <span class="course-name">
              {{ tableData[courseIndex][index].courseName }}
            </span>
                    <p class="teacher-name">
                        {{ tableData[courseIndex][index].teacherName }}
                    </p>
                    <p class="location-name">
                        {{ tableData[courseIndex][index].location }}
                    </p>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "TimeTable",
        data() {
            return {
                tableData: [
                    [
                        {
                            courseName: "",
                            teacherName: "",
                            location: ""
                        }
                    ]
                ]
            };
        },
        methods: {
            updateData(data) {
                this.clearTable();
                for (let i = 0; i < data.length; i++) {
                    this.setLesson(data[i]);
                }
            },
            setLesson(item) {
                let split = item.time.split("-");
                let week = parseInt(split[0]);
                let lesson = parseInt(split[1]);
                let length = parseInt(split[2]);
                for (let i = 0; i < length; i++) {
                    this.tableData[week - 1][lesson - 1 + i] = {
                        courseName: item.courseName,
                        teacherName: item.teacherName,
                        location: item.location
                    };
                }
            },
            clearTable() {
                let table = [];
                for (let i = 0; i < 7; i++) {
                    let arr = [];
                    for (let i2 = 0; i2 < 12; i2++) {
                        arr.push({
                            courseName: "",
                            teacherName: "",
                            location: ""
                        });
                    }
                    table.push(arr);
                }
                this.tableData = table;
            },
            digital2Chinese(num, identifier) {
                const character = [
                    "零",
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六",
                    "七",
                    "八",
                    "九",
                    "十",
                    "十一",
                    "十二"
                ];
                return identifier === "week" && num === 7 ? "日" : character[num];
            }
        },
        created() {
            this.clearTable();
        }
    };
</script>

<style lang="scss" scoped>
    table {
        table-layout: fixed;
        width: 100%;

        thead {
            background-color: #409EFF;

            th {
                color: #fff;
                line-height: 50px;
                font-weight: bold;
                font-size: 14px;
            }
        }

        tbody {
            background-color: #eaf2ff;

            td {
                line-height: 0;
                color: #677998;
                height: 50px;
                font-size: 13px;

                span {
                    line-height: 0.9;
                }
            }

            .course-name {
                color: #000;
                font-size: 16px;
                font-weight:200;
            }
        }

        th,
        td {
            width: 60px;
            padding: 2px 2px;
            font-size: 12px;
            text-align: center;
        }

        tr td:first-child {
            color: #333;

            .period {
                font-size: 8px;
            }
        }
    }
</style>
